<template>
  <a-row>
    <a-button style="float: right" type="primary" @click="showDrawer">编辑检索条件</a-button>
    <a-drawer
      placement="right"
      :closable="false"
      :visible="visible"
      :width="800"
      :maskClosable="true"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
    >
      <div slot="title">
        <span>选项检索</span>
        <a-button style="float: right;" type="primary" @click.stop="genRule">确定</a-button>
        <a-button style="float: right;margin-right: 10px" type="success" @click.stop="onClose">取消</a-button>
      </div>
      <a-spin :spinning="confirmLoading">
        <a-button type="primary" @click="addCondition">新增条件</a-button>
        <a-form :model="linkedFormQuery" ref="form">
          <a-table
            :columns="columns"
            :data="linkedFormQuery.dataSource"
            row-key="wid"
            :pagination="false"
          >
            <template slot="whereKey" slot-scope="text, record">
              <a-form-item>
                <a-select style="min-width:240px" v-model="record.whereKey" placeholder="请选择">
                  <a-option
                    v-for="option in whereKeyOptions"
                    :key="option.value"
                    :value="option.value">
                    {{ option.label }}
                  </a-option>
                </a-select>
              </a-form-item>
            </template>
            <template slot="whereType" slot-scope="text, record">
              <a-form-item>
                <a-select v-model="record.whereType">
                  <a-option :value="item.value" v-for="item in queryCondition" :key="item.value">
                    {{ item.label }}
                  </a-option>
                </a-select>
              </a-form-item>
            </template>
            <template slot="whereValue" slot-scope="text, record">
              <a-form-item>
                <a-input v-model="record.whereValue" placeholder="请输入"></a-input>
              </a-form-item>
            </template>
            <template slot="whereRelation" slot-scope="text, record">
              <a-form-item>
                <a-select v-model="record.whereRelation">
                  <a-option value="and">并且</a-option>
                  <a-option value="or">或</a-option>
                </a-select>
              </a-form-item>
            </template>
            <template slot="action" slot-scope="text, record,index">
              <a-form-item>
                <a class="g-delete-button" @click="handleDelete(index)">删除</a>
              </a-form-item>
            </template>
          </a-table>
        </a-form>
      </a-spin>
    </a-drawer>
  </a-row>
</template>

<script>
import { nanoid } from 'nanoid'
import { queryCondition } from '@/components/Form/base/options'
import _ from 'lodash'
export default {
  name: 'LinkedFormQuery',
  props: {
    formData: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    whereKeyOptions () {
      const options = []
      this.dataObj.tableExConfig.map(item => {
        // 主表绑定健选项
        if (item.masterMeterName) {
          options.push({
            label: item.masterFormName + '_' + item.data[0].masterMeter.name,
            value: item.masterMeterName + '.' + item.data[0].masterMeter.dataIndex
          })
        } else {
          options.push({
            label: '主表_' + item.data[0].masterMeter.name,
            value: item.data[0].masterMeter.dataIndex
          })
        }
        // 副表绑定健选项
        const subIndex = item.data[0].subMeter.dataIndex
        const subKeyName = item.data[0].subMeter.name
        options.push({
          label: item.subFormName + '_' + (subKeyName || subIndex),
          value: item.subMeterName + '.' + subIndex
        })
      })
      return options
    }
  },
  data () {
    return {
      visible: false,
      confirmLoading: false,
      meterOptions: [],
      linkedFormQuery: {
        dataSource: []
      },
      queryCondition,
      rules: {
      },
      form: {
        masterMeterId: '', // 主表
        subMeterId: '', // 副表
        selectFields: [], // 本次选择的处理字段
        fieldOptions: [],
        keyOptions: [] // 外键选择项
      },
      columns: [
        {
          title: '条件字段',
          dataIndex: 'whereKey',
          scopedSlots: { customRender: 'whereKey' }
        },
        {
          title: '查询条件',
          dataIndex: 'whereType',
          scopedSlots: { customRender: 'whereType' }
        },
        {
          title: '条件输入',
          dataIndex: 'whereValue',
          scopedSlots: { customRender: 'whereValue' }
        },
        {
          title: '条件关系',
          dataIndex: 'whereRelation',
          scopedSlots: { customRender: 'whereRelation' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  inject: ['dataObj'],
  methods: {
    // 生成规则
    genRule () {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.formData.linkedFormQuery = _.cloneDeep(this.linkedFormQuery)
          this.$message.success('检索条件生成成功')
          this.onClose()
        } else {
          this.$message.warn('请检查填写内容')
        }
      })
    },
    // 删除条件
    handleDelete (index) {
      this.linkedFormQuery.dataSource.splice(index, 1)
    },
    addCondition () {
      this.linkedFormQuery.dataSource.push({
        wid: nanoid(),
        whereKey: '',
        whereType: 'eq',
        whereValue: '',
        whereRelation: 'and'
      })
    },
    afterVisibleChange (val) {
      console.log('visible', val)
    },
    showDrawer () {
      if (!this.formData.dataOptionField.length) {
        this.$message.warn('请先设置查询键名')
        return
      }
      Object.assign(this.linkedFormQuery, _.cloneDeep(this.formData.linkedFormQuery)) // 赋值
      this.visible = true
    },
    onClose () {
      this.visible = false
    }
  },
  created () {
  }
}
</script>

<style lang="less" scoped>
.header__action {
  /deep/ .arco-select{
    width: 100%;
  }
  .header__in-text {
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-right: 10px
  }

  .header__add-button {
    margin-left: 10px;
  }
}

.main__table {
  margin-top: 20px;
  //align-items: center;
}
</style>
